<!--
  产品溯源信息详情
 -->

<template>
  <div class="Timeline-box">
    <div class="Timeline">
      <zhdateview
        ref="zhdateview"
        :batch-time="batchTime"
        :bat-id="batchFrom.batchNo"
        @evenday="evenday"
        @evenYear="evenYear"
      />
      <!-- <div class="farmingST">
        <span v-for="(item, index) in farmingSTList" :key="index"><i :style="'background-color:' + item.color"></i> {{ item.title }} </span>
      </div>-->
      <div v-if="farmingList.length > 0" class="farming">
        农事：
        <span v-for="(item, index) in farmingList" :key="index">
          {{ item.agriculturalWorkTypeName }}
          <i v-if="farmingList.length-1 !== index">，</i>
        </span>
      </div>
      <div v-if="percentList.length > 0" class="percen">
        农资：
        <span v-for="(item, index) in percentList" :key="index">
          {{ item.agriculturalMaterialName }}
          <i v-if="percentList.length-1 !== index">，</i>
        </span>
      </div>
    </div>
    <div class="contents">
      <el-card id="sowing" class="box-card">
        <div slot="header" class="clearfix">
          <span>产品信息 PRODUCT INFORMATION</span>
        </div>
        <!-- <el-col :span="6">
          <div class="zh-img-sty">
            <img class="zzimg" :src="topimgurl ? topimgurl : imgurls" alt="" />
          </div>
        </el-col>-->
        <el-col :span="19">
          <p class="batch-title">{{ batchBaseMessageList.batchName }}</p>
          <ul>
            <!-- <li>
            <span class="zh-lable">| 品牌名:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.brand"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品编号:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.productNumber"
            />
          </li>
          <li>
            <span class="zh-lable">| 产品等级:</span>
            <el-input
              disabled
              align="center"
              :value="batchBaseMessageList.trace.productGrade"
            />
            </li>-->
            <li>
              <span class="zh-lable">| 种养种类:</span>
              <el-input disabled align="center" :value="batchBaseMessageList.plantingTypeName" />
            </li>
            <li>
              <span class="zh-lable">| 产品品种:</span>
              <el-input disabled align="center" :value="batchBaseMessageList.varietyName" />
            </li>
            <!-- <li>
              <span class="zh-lable">| 批次名称:</span>
              <el-input
                disabled
                align="center"
                :value="batchBaseMessageList.batchName"
              />
            </li>-->
            <li>
              <span class="zh-lable">| 批次号:</span>
              <el-input disabled align="center" :value="batchBaseMessageList.batchNo" />
            </li>
            <li>
              <span class="zh-lable">| 产地:</span>
              <el-input disabled align="center" :value="batchBaseMessageList.plantAddress" />
            </li>
            <li>
              <p v-if="qualityimageList.length > 0" class="batclick">
                <el-button @click="batclick('#X')">点击查看检测报告</el-button>
              </p>
            </li>
          </ul>
        </el-col>
        <el-col class="sowing-right" :span="5">
          <div id="vue-qr">
            <p>
              <vue-qr
                :text="downloadData.url"
                :margin="10"
                color-dark="#000"
                color-light="#fff"
                :dot-scale="1"
                :logo-scale="0.2"
                :size="200"
                :logo-src="downloadData.icon"
              />
            </p>
            <h3
              v-print="{
                id: 'vue-qr',
                popTitle: batchBaseMessageList.batchNo,
                extraHead: batchBaseMessageList.batchNo
              }"
              class="sowing-ones ones"
            >{{ batchBaseMessageList.batchName }}</h3>
          </div>

          <!-- <div class="sowing-right-line-one">扫码溯源</div>
          <div class="sowing-right-line-two">
            我承诺对产品质量安全以及合格性和真实性负责
          </div>-->
        </el-col>
      </el-card>

      <!-- 主体信息 -->
      <transition name="el-zoom-in-top">
        <SubjectInformation
          :batch-base-message-list="batchBaseMessageList"
          :zizhiimage-list="zizhiimageList"
        />
      </transition>
      <!-- 生长数据图片数据 -->
      <transition name="el-zoom-in-top">
        <GrowingImg :bat-id="batchFrom.batchNo" :start-time="startTimes" :end-time="endTimes" />
      </transition>
      <!-- 农资投入信息 -->
      <transition name="el-zoom-in-top">
        <InputAgriculturalMaterial
          :bat-id="batchFrom.batchNo"
          :start-time="startTimes"
          :end-time="endTimes"
          @percent="percet"
        />
      </transition>
      <!-- 农事作业信息 -->
      <transition name="el-zoom-in-top">
        <Farming
          :bat-id="batchFrom.batchNo"
          :start-time="startTimes"
          :end-time="endTimes"
          @farmingnt="farmist"
        />
      </transition>
      <!-- 病虫害信息 -->
      <transition name="el-zoom-in-top">
        <Diseases :bat-id="batchFrom.batchNo" :start-time="startTimes" :end-time="endTimes" />
      </transition>
      <!-- 生长环境数据 -->
      <transition name="el-zoom-in-top">
        <GrowingEnvironmentData
          :bat-id="batchFrom.batchNo"
          :start-time="startTime"
          :end-time="endTime"
        />
      </transition>
      <!-- 检测报告 -->
      <transition v-if="false" name="el-zoom-in-top">
        <QualityInspectionReport
          :bat-id="batchFrom.batchNo"
          :start-time="startTime"
          :end-time="endTime"
        />
      </transition>
      <!-- 通用图片弹出框 -->
      <el-dialog title="检测报告" :visible.sync="dialoglityFormVisible">
        <!-- 检测报告 -->
        <!-- <div class="base-zh-title">检测报告</div> -->
        <div class="quality">
          <el-button class="prev" type="text" @click="prev()">
            <i class="el-icon-arrow-left"></i>
          </el-button>
          <el-carousel
            ref="lityfix"
            :loop="true"
            arrow="never"
            :interval="4000"
            type="card"
            :autoplay="true"
            height="710px"
          >
            <el-carousel-item v-for="(item, index) in qualityimageList" :key="index">
              <img :src="'data:image/png;base64,' + item.data" class="zhimgl" />
            </el-carousel-item>
          </el-carousel>
          <el-button class="next" type="text" @click="next()">
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
        <!-- </div> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import vueQr from "vue-qr";
import { getToken } from "@/utils/auth";
import SubjectInformation from "./components/subject-information.vue";
import zhdateview from "./components/zhdateview.vue";
import QualityInspectionReport from "./components/quality-inspection-report.vue";
import batchreq from "@/api/trace-source-web/common-production/index";
import Diseases from "./components/diseases.vue";
import GrowingImg from "./components/growing-img.vue";
import InputAgriculturalMaterial from "./components/input-agricultural.vue";
import GrowingEnvironmentData from "./components/growing-environment-data.vue";
import graApi from "@/api/trace-source-web/production-api/index-primary.js";
import Farming from "./components/input-farming.vue";
export default {
  components: {
    vueQr,
    SubjectInformation,
    GrowingImg,
    zhdateview,
    QualityInspectionReport,
    InputAgriculturalMaterial,
    Diseases,
    Farming,
    GrowingEnvironmentData
  },
  props: {
    batchFrom: {
      type: Object,
      default: () => ({})
    },
    batCode: {
      type: Number,
      default: 0
    },
    // imgurls: {
    //   type: String,
    //   default: () => ""
    // },
    srcImage: {
      type: String,
      default: () => ""
    },
    state: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 无时分秒
      batchTime: [],
      startTime: null,
      endTime: null,
      // 有时分秒
      startTimes: null,
      endTimes: null,
      topimgurl: "",
      batchMonth: [],
      farmingSTList: [
        {
          color: "#7ed321",
          title: "农资投入"
        },
        {
          color: "#21b8d3",
          title: "农事作业"
        }
      ],
      // 批次基础信息
      batchBaseMessageList: {
        batchName: "", // 批次名称
        plantingTypeName: "", // 种养种类
        mode: "", //
        varietyName: "", // 产品品种
        batchNo: "", // 批次号
        contact: "", // 负责人
        organizationName: "", // 主体名称.
        address: "", // 主体地址
        trace: {
          brand: "", // 品牌名
          productNumber: "", // 产品编号
          productGrade: "", // 产品等级
          originPlace: "", // 产地
          plantPlace: "", // 种养地址
          tracePictureId: "" // 顶部图片id
        }
      },
      trace: {
        brand: "", // 品牌名
        productNumber: "", // 产品编号
        productGrade: "", // 产品等级
        originPlace: "", // 产地
        plantPlace: "", // 种养地址
        tracePictureId: "" // 顶部图片id
      },
      // 二维码数据
      downloadData: {
        url: "",
        icon: require("@/assets/trace-source-manage/yezi.png")
        // icon: 'https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png'
      },
      // ---农资投入---

      agridialogAVisible: false,
      dialoglityFormVisible: false,
      current: 0,
      // imgurls: "https://img.js.design/assets/img/615fd67a91d8f56085f05f4a.png",
      imgurls: "",
      // 点击选择的图片-弹框展示
      selectedpicdata: "",
      // 批次id
      batchNo: "",
      // 数据库名称
      databaseName: "DB_TDW1_CXXC",
      f: "",
      dialogFormVisible: false,
      // 批次类型
      batchType: "PRODUCTION",
      // 主体信息轮播图
      zizhiimageList: [],
      farmingList: [],
      percentList: [],
      qualityimageList: []
    };
  },
  mounted() {
    let batchFrom = this.batchFrom;
    // console.log(batchFrom)
    setTimeout(() => {
      this.setbatchidmet(batchFrom);
    }, 200);
  },
  methods: {
    // 设置 点击每日
    evenday(e) {
      this.startTime = e.e;
      this.endTime = e.e;
      this.startTimes = e.e + " 00:00:00";
      this.endTimes = e.e + " 23:59:59";
    },
    // 点击年份
    evenYear(e) {
      // 判断是不是点击年份
      if (e.se === "Year") {
        // 转换字符串 防止循环报错
        let date = e.date.toString();
        // 获取当前年份的结束日期
        this.batchChange(date);
        // 页面年份传值
        this.batchSpecific(e.date + "-" + this.batchMonth.slice(-1)[0], 0);
      }
      // 判断是不是点击月份
      if (e.se === "Month") {
        // 页面月份传值
        this.batchSpecific(e.date, 0);
      }
    },
    setbatchidmet(val) {
      this.batchNo = val.batchNo;
      this.batchNo = val.batchNo;
      // this.batchNo = val.batchType;
      if (val.pictureId) {
        this.pictureId = val.pictureId;
      }
      // console.log(this.batchNo,this.batchNo)
      this.databaseName = getToken("databaseName");
      // let zhurl = `${this.$webSerUrl}traceSo/#/?batchNo=${this.batchNo}&databaseName=${this.databaseName}`
      this.downloadData = {
        url: `${this.$webSerUrl}mateFarmTraceSource/#/pages/production-trace/production-trace?batchNo=${this.batchNo}&databaseName=${this.databaseName}&batchType=${val.traceSource.batchType}`,
        // icon: require("@/assets/trace-source-manage/yezi.png")
        icon: this.srcImage || require("@/assets/trace-source-manage/yezi.png")
      };
      this.getbatchinfo();
      this.gettimeinfo();
    },
    async feignInfoData(id) {
      // let pictureData = ''
      const { data: res } = await batchreq.feignInfo(id);
      return res.pictureData;
    },
    // 检测报告
    batclick(e) {
      if (this.qualityimageList.length > 0 && e === "#X") {
        this.dialoglityFormVisible = true;
        return;
      }
      let nowbatchNo = this.batchNo;
      graApi.getDetectionReport(nowbatchNo).then(res => {
        if (res.code === 1) {
          this.qualityimageList = res.data || [];
        }
      });
    },
    percet(e) {
      this.percentList = e;
    },
    farmist(e) {
      this.farmingList = e;
    },
    // 获取时间信息
    gettimeinfo() {
      let nowbatchNo = this.batchNo;
      this.batchTime = [];
      // 获取批次的开始月份到结束月份
      graApi.queryMonth(nowbatchNo).then(res => {
        this.batchTime = res.data;
        // console.log(res.data)
        this.batchYear = [];
        // 提取所有年份
        this.batchTime.forEach(item => {
          this.batchYear.push(item.slice(0, 4));
        });
        // 年份去重
        this.batchYear = this.indexOfUniq(this.batchYear);
        // 获取点击月份的开始结束日期
        this.batchSpecific(this.batchTime.slice(-1)[0], 0);
      });
    },
    // 年份切换
    batchChange(val) {
      // console.log(val)
      this.batchMonth = [];
      this.batchTime.forEach(item => {
        if (val === item.slice(0, 4)) {
          item = item.slice(5, 8);
          this.batchMonth.push(item);
        }
      });
    },
    batchSpecific(val, index) {
      // 每月的第一天
      let startTime = val + "-01";
      // 转化时间戳
      var dateEnd = new Date(startTime);
      // 获取当前月份
      var currentMonth = dateEnd.getMonth();
      var nextMonth = ++currentMonth;
      var nextMonthFirstDay = new Date(dateEnd.getFullYear(), nextMonth, 1);
      var oneDay = 1000 * 60 * 60 * 24;
      var end = new Date(nextMonthFirstDay - oneDay + 24 * 60 * 60 * 1000 - 1);
      let endTime = this.dateToFormattwo(end);
      // 获取开始结束日期
      this.startTime = startTime;
      this.endTime = endTime;
      // 获取开始结束时间
      this.startTimes = startTime + " 00:00:00";
      this.endTimes = endTime + " 23:59:59";
      // this.selectedindex = index
      //
    },
    // 去重
    indexOfUniq(arr) {
      let result = [];
      for (let i = 0, len = arr.length; i < len; i++) {
        // 用indexOf 简化了二层循环的流程
        if (result.indexOf(arr[i]) === -1) result.push(arr[i]);
      }
      return result;
    },
    // 获取批次信息
    getbatchinfo() {
      // let nowbatchNo = this.batchNo;
      let nowbatchNo = this.batchNo;
      let nowbatchType = this.batchType;
      let params = {
        batchNo: nowbatchNo,
        batchType: nowbatchType
      };
      graApi.queryTraceForScanCode(params).then(res => {
        this.batchBaseMessageList = res.data.productionBaseInfo;
        // console.log(this.batchBaseMessageList)
        this.organizationInfoId = res.data.organizationInfoId;
        // console.log(this.organizationInfoId)
        if (this.organizationInfoId !== "") {
          this.getzizhiimageList(this.organizationInfoId);
        }
        if (this.batchBaseMessageList.trace) {
          this.getpicturedata(this.batchBaseMessageList.trace.tracePictureId);
        } else {
          this.batchBaseMessageList.trace = {
            brand: "", // 品牌名
            productNumber: "", // 产品编号
            productGrade: "", // 产品等级
            originPlace: "", // 产地
            plantPlace: "", // 种养地址
            tracePictureId: "" // 顶部图片id
          };
        }
        if (this.pictureId) {
          this.feignInfoData(this.pictureId).then(url => {
            this.imgurls = "data:image/png;base64," + url;
          });
        }
      });
    },
    // 获取资质轮播图
    getzizhiimageList(organizationInfoId) {
      let params = {
        organizationNo: organizationInfoId,
        accessToken: getToken("token")
      };
      graApi.feignInfo(params).then(res => {
        let listone = res.data;
        if (listone) {
          if (listone[0]) {
            let listtwo = [];
            listone.forEach(itemone => {
              listtwo.push({
                url: "data:image/png;base64," + itemone.imgData
              });
            });
            this.zizhiimageList = listtwo;
            // console.log(this.zizhiimageList);
          }
        }
      });
    },
    // 通过图片id获取图片信息
    getpicturedata(id) {
      graApi.tracePicture(id).then(res => {
        if (res.code === 1) {
          this.topimgurl = res.data.data;
          // console.log(this.topimgurl)
        } else {
          this.topimgurl = "data:image/png;base64," + this.imgurls;
        }
      });
    },

    // 主体信息
    // ----------
    imgUrl(e) {
      // console.log(e)
      this.selectedpicdata = e;
      this.dialogFormVisible = true;
    },
    search() {},
    ret() {
      this.nowpage === 2;
      // this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
// 头部信息颜色
.Timeline-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: calc(100% - 16px);
  width: 100%;
  overflow: hidden;
  position: relative;
  .Timeline {
    height: calc(100%);
    width: 400px;
    background-color: #225768;
    overflow-x: auto;
    .farmingST {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      span {
        i {
          display: inline-block;
          width: 20px;
          height: 10px;
          // background-color: #000000;
        }
      }
    }
    .farming {
      padding-left: 10px;
    }
    .percen {
      padding-left: 10px;
    }
    div {
      margin-bottom: 10px;
      width: 100%;
    }
  }
  .contents {
    width: calc(100% - 410px);
    padding-right: 10px;
    overflow-y: auto;
    ::v-deep .el-card {
      .el-card__header {
        color: rgba(130, 229, 255, 1);
      }
    }
  }
}
.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #bcbcbc;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #bcbcbc;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
.el-card {
  width: 100%;
  background-color: rgba(34, 87, 104, 1);
  color: #fff;
  margin-bottom: 18px;
  border: 0px solid rgba($color: #fff, $alpha: 0.3);
  ::v-deep .el-card__header {
    color: #64b9d1;
    font-size: 16px;
    border-bottom: 1px solid rgba($color: #64b9d1, $alpha: 0.9);
  }
}
.button {
  position: absolute;
  top: 5px;
  right: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: #fffff0;
  border: none;
}
.batch-title {
  // margin-top: 60px;
  margin-bottom: 3px;
  font-size: 19px;
  width: 70%;
  color: rgba(130, 229, 255, 1);
  text-align: center;
}
.zh-lable {
  width: 80px;
  white-space: nowrap;
  font-size: 16px;
}
.step {
  height: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  .el-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    .stepBtn {
      background-color: rgba($color: #000000, $alpha: 0);
      // color:#fff;
      // ::v-deep i {
      //   color: #FFF;
      // }
    }
    .right {
      position: absolute;
      right: -36%;
      /* transform: translate(-40%, -50%); */
      top: 34%;
      width: 73%;
      height: 2px;
      background-color: #fffff085;
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #fffff0;
      }
    }
  }
}
#sowing {
  min-height: 200px;
  // min-height: 250px;
  display: inline-block;
  width: 53%;
  ::v-deep .el-card__body {
    padding: 0;
    // min-height: 200px;
  }
  .el-col {
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    .zh-img-sty {
      width: 100%;
      height: 280px;
      // background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .zzimg {
        margin: 0 auto;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-sizing: content-box;
        border: 15px solid rgba($color: rgba(15, 70, 86, 1), $alpha: 1);
      }
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding-left: 10px;
      flex-direction: row;
      position: relative;
      align-items: center;
      li {
        display: flex;
        list-style-type: none;
        margin: 0;
        width: 50%;
        line-height: 40px;
        .el-input {
          margin-left: 10px;
          width: 60%;
          ::v-deep .el-input__inner {
            border: 0;
            height: 25px;
            background-color: rgba($color: #0e4352, $alpha: 1);
            border-radius: 40px;
            font-size: 14px;
            text-align: center;
          }
        }
      }
    }
  }
  .sowing-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 57, 71, 0.55);
    margin-top: 20px;
    // height: 280px;
    height: 140px;
    img {
      margin-left: 0;
      margin-right: 0px;
      width: 110px;
      height: 110px;
      margin-top: 10px;
      margin-bottom: 5px;
      border-radius: 0;
      border: 0;
      box-shadow: 1px 1px 6px #000000;
    }
    .sowing-right-line-one {
      margin-top: 20px;
      font-size: 18px;
      letter-spacing: 3px;
      width: 100%;
      text-align: center;
    }
    .sowing-right-line-two {
      margin-top: 5px;
      font-size: 12px;
      width: 100px;
      height: 50px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 20px;
      font-weight: 600;
      text-align: center;
    }
  }
}

.zh-right-echart {
  ::v-deep .chart {
    margin: 0 auto !important;
    width: 1100px !important;
    height: 300px !important;
    > div:first-child {
      height: 300px !important;
      canvas {
        height: 300px !important;
      }
    }
  }
}
.zh-box-table {
  ::v-deep .chart {
    margin: 0 auto !important;
    width: 1450px !important;
    height: 280px !important;
    > div:first-child {
      // width: 1400px !important;
      height: 280px !important;
      canvas {
        width: 1450px !important;
        height: 280px !important;
      }
    }
  }
}
.imgl {
  margin: 0 40px;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  .imgdet {
    border-radius: 0;
    .shadows {
      margin: 2px !important;
      box-sizing: content-box;
      position: relative;
      .shadowx {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 20, 26, 0.71);
      }
      .shadowBut {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
      }
    }
    .shadows:hover {
      border: 1px solid rgba(255, 255, 255, 0.54);
      .shadowBut {
        display: block;
      }
      .shadowx {
        display: block;
      }
    }
    img {
      border: none !important;
      border-radius: 0 !important;
      width: 280px !important;
      height: 200px !important;
    }
    .text {
      text-align: center;
    }
  }
}
// // 解决行无法铺满整个表格
// ::v-deep .el-table__body{
//   height:auto !important;
// }
// 检测报告
.quality {
  width: 100%;
  height: 100%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  .el-carousel {
    width: 90%;
    .zhimgl {
      transform: scale(0.8);
      height: 68vh;
    }
    ::v-deep .el-carousel__mask {
      background-color: #00000000;
    }
  }
}
.batclick {
  position: absolute;
  right: 3%;
  top: -74%;
  .el-button {
    border-radius: 15px;
    height: 30px;
    line-height: 9px;
    background-color: #007795;
    color: #fffff0;
    border-color: #007795;
  }
  .el-button:hover {
    color: #01fde0;
    border-color: #01fde0;
  }
}
// 弹出框图片
::v-deep .el-dialog {
  .el-dialog__headerbtn {
    position: absolute;
    top: 5px;
    right: 10px;
  }
  .el-dialog__body {
    padding: 5px 5px;
  }
  img {
    width: 100%;
  }
}
::v-deep .zhcontent {
  .content {
    height: calc(100% - 15px) !important;
  }
}
#vue-qr {
  border: 1px solid transparent;
  p {
    text-align: center;
  }
}
.sowing-ones {
  text-align: center;
}
.ones {
  display: none;
}
</style>
